<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" type="text/css" href="../public/css/index.css" />
		<title>账号登录</title>
		<style type="text/css">
			body{
				background:#fafafa;
			}
		</style>
	</head>
	<body>
		<div id="example">
			<div class="header_img">
				<img src="../public/images/icon/bg-1.png" class="header_img_bg">
				<img src="../public/images/icon/logo.png" alt="" class="header_img_icon">
			</div>
			<div class="content_box">
				<div class="contentBox_header">
					<span @click="tag" :class="{spanCk:tagDlfs}">
						用户名登录
					</span>
					<span @click="tag" :class="{spanCk:!tagDlfs}">
						验证码登录
					</span>
				</div>
				<div class="contentBox_con">
					<div v-show="tagDlfs">
						<div class="conBInputB">
							<div class="conBInputIn">
								<i class="InputIcon">
									<img src="../public/images/icon/1_14.png">
								</i>
								<input v-model="yhm.name" class="InputI" type="text" placeholder="请输入您的用户名/手机号">
							</div>
							<div class="conBInputIn">
								<i class="InputIcon">
									<img src="../public/images/icon/1_32.png">
								</i>
								<input v-model="yhm.pass" class="InputI" type="password" placeholder="请输入密码">
							</div>
							<div class="conBInputIn">
								<i class="InputIcon">
									<img src="../public/images/icon/1_42.png">
								</i>
								<input style="width: 9rem;" v-model="yhm.code" class="InputI" type="text" placeholder="请输入验证码">
								<div class="conBYzm" style="background: transparent;">

								</div>
							</div>
							<div class="conBWj">
								<a href="#">忘记密码?</a>
							</div>
							<div class="login_button" @click="login">
								<img class="login_button_img" src="../public/images/icon/1_46.png">
								<span class="login_button_span">
									立即登录
								</span>
							</div>
							<div class="login_button">
								<img class="login_button_img" src="../public/images/icon/1_53.png">
								<span class="login_button_span login_button_spanZc">
									立即注册
								</span>
							</div>
						</div>
					</div>
					<div v-show="!tagDlfs">
						<div class="conBInputB">
							<div class="conBInputIn">
								<i class="InputIcon">
									<img src="../public/images/icon/1_14.png">
								</i>
								<input v-model="yzm.name" class="InputI" type="text" placeholder="请输入您的手机号">
							</div>

							<div class="conBInputIn">
								<i class="InputIcon">
									<img src="../public/images/icon/1_42.png">
								</i>
								<input style="width: 9rem;" v-model="yzm.code" class="InputI" type="text" placeholder="请输入验证码">
								<div class="conBYzm" @click="sendYzm" :class="{conBYzmFs:yzmYs}">
									{{yzmts}}
								</div>
							</div>

							<div class="login_button" @click="login1">
								<img class="login_button_img" src="../public/images/icon/1_46.png">
								<span class="login_button_span">
									立即登录
								</span>
							</div>

						</div>

					</div>
				</div>

			</div>
		</div>


		<script src="../public/script/plug/jquery-3.3.1.min.js"></script>
		<script src="../public/script/plug/vue.js"></script>
		<script type="text/javascript" src="../public/script/plug/layer/layer.js"></script>
		<script>
			var data = {
				tagDlfs: true,
				yzmYs: false,
				yzmdjs: 30,
				yzmts: '发送验证码',
				yhm: {
					name: '',
					pass: '',
					code: ''
				},
				yzm: {
					name: '',
					code: ''
				}
			};
			var vm = new Vue({
				el: '#example',
				data: data,
				methods: {
					tag: function() {
						this.tagDlfs = !this.tagDlfs;
					}, //标签切换
					sendYzm: function() {
						let that = this;
						if (!(/^1[3456789]d{9}$/.test(that.yzm.name))) {
							layer.msg("手机号码有误，请重填");
							return false;
						}
						if (that.yzmYs) {
							layer.msg('验证码已发送，请' + that.yzmdjs + '后重试');
						} else {
							that.yzmYs = true;
							that.yzmts = that.yzmdjs + 's';
							// 发送验证码  执行倒计时，更改样式
							let yzmdjs = setInterval(function() {
								if (that.yzmdjs <= 1) {
									clearInterval(yzmdjs);
									that.yzmdjs = 30;
									that.yzmts = '发送验证码';
									that.yzmYs = false;
								} else {
									that.yzmdjs = that.yzmdjs - 1;
									that.yzmts = that.yzmdjs + 's';
								}
							}, 1000)
						}
					}, //发送验证码
					login: function() {
						let that = this;
						if (!that.yhm.name) {
							layer.msg('请输入用户名');
							return false;
						}
						if (!that.yhm.pass) {
							layer.msg('请输入密码');
							return false;
						}
						if (!that.yhm.code) {
							layer.msg('请输入验证码');
							return false;
						}
						let layerIndex = layer.load(2);
						//ajax
						console.log(that.yhm);
						layer.close(layerIndex);
					}, //执行登录
					login1: function() {
						let that = this;
						if (!that.yzm.name) {
							layer.msg('请输入用户名');
							return false;
						}
						if (!that.yzm.code) {
							layer.msg('请输入验证码');
							return false;
						}
						let layerIndex = layer.load(2);
						//ajax
						console.log(that.yzm);
						layer.close(layerIndex);
					} //执行验证码登录
				}
			});
		</script>
	</body>
</html>
